<!--
 * @FilePath     : /study_code/wangEditor/11-5.html
 * @Description  : 设置 纯文本格式 内容
 * @Date         : 2025-04-07 23:04:22
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-07 23:10:40
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/@wangeditor/editor/dist/css/style.css" />
    <link rel="stylesheet" href="/wangEditor/common/style.css" />
  </head>
  <body>

    <div id="editor—wrapper">
      <div id="toolbar-container"><!-- 工具栏 --></div>
      <div id="editor-container"><!-- 编辑器 --></div>
    </div>

    <script src="/@wangeditor/editor/dist/index.js"></script>
    <script>
      const { createEditor, createToolbar } = window.wangEditor

      // ------------------------------
      // 1. 把 text 转换为 html
      const text = '默认的\nhtml内容'
      // text 内容
      const html = text
        .split(/\n/)
        .map(line => {
          console.log(2, 'line', line)
          /*
          2 'line' '默认的'
          2 'line' 'html内容'
          */
          return `<p>${line}</p>`
        })
        .join('\n')
      console.log(1, '转换后的文本内容', html) // '<p>默认的</p>\n<p>html内容</p>'
      // 核心：纯文本中是通过 \n 来区分折行的

      const editorConfig = {
        placeholder: 'Type here...',
      }

      const editor = createEditor({
        selector: '#editor-container',
        html: html,
        config: editorConfig,
        mode: 'default', // or 'simple'
      })

      /* const toolbarConfig = {}

      const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default', // or 'simple'
      }) */
    </script>
  </body>
</html>
